import MainContainerCustom from '@/components/MainContainerCustom';
import { View } from '@tarojs/components';
import './index.less';
import { CBlockCustom, CImCardCustom } from '@vh-mobile/pro-components';
import dayjs from 'dayjs';
import { navigateTo } from '@vh-mobile/pro-utils';
import type { DataType } from '@vh-mobile/pro-components/lib/c-im-card-custom/types';

export default function DemoIm() {
  const data: DataType[] = [
    {
      id: 1,
      messageType: 'text',
      badge: 999,
      headimg: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickname: '融云产品经理',
      desc: '提供文字、图片、表情及语音片段提供文字、图片、表情及语音片段',
      date: dayjs().subtract(20, 'm').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 2,
      messageType: 'text',
      headimg: 'https://pic3.zhimg.com/80/v2-ca9b750a4ed5b87d9bc8c553b44e615e_720w.webp',
      nickname: 'IOS8 Design',
      desc: '多年专注于移动互联网即时通讯',
      date: dayjs().subtract(20, 'h').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 3,
      messageType: 'text',
      headimg: 'https://pic2.zhimg.com/80/v2-451a2400fd7bcef953d887c3daad6489_720w.webp',
      nickname: '开发者群开发者群开发者群开发者群',
      desc: '郝云:Okay',
      date: dayjs().subtract(10, 'w').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 4,
      messageType: 'text',
      badge: 1,
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      nickname: '融云客服',
      desc: '[图片]',
      date: dayjs().subtract(10, 'd').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 5,
      date: dayjs().subtract(1, 'm').format('YYYY-MM-DD HH:mm:ss'),
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      isSelf: true,
      messageType: 'image',
      nickname: '周大仙11222',
      url: 'https://pic2.zhimg.com/v2-48263fb6b6c42d4a26e7e437ae444c71_b.jpg',
    },
    {
      id: 6,
      date: dayjs().subtract(1, 'm').format('YYYY-MM-DD HH:mm:ss'),
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      isSelf: true,
      messageType: 'video',
      nickname: '周大仙11222',
      url: 'https://pic2.zhimg.com/v2-48263fb6b6c42d4a26e7e437ae444c71_b.jpg',
    },
    {
      id: 7,
      date: dayjs().subtract(1, 'm').format('YYYY-MM-DD HH:mm:ss'),
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      isSelf: true,
      messageType: 'voice',
      nickname: '周大仙11222',
      url: 'https://pic2.zhimg.com/v2-48263fb6b6c42d4a26e7e437ae444c71_b.jpg',
    },
    {
      id: 8,
      date: dayjs().subtract(1, 'm').format('YYYY-MM-DD HH:mm:ss'),
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      isSelf: true,
      messageType: 'custom',
      nickname: '周大仙11222',
      houseName: '房源1',
    },
  ];

  const onClick = (d: any, e: any) => {
    console.log('===================');
    console.log(d, e, 'onClick');
    console.log('===================');
    navigateTo({ url: '/pages/imChat/index' });
  };

  const onDelete = async (d: any) => {
    if (d.id === 1) {
      // await apiFormatFn()
      throw new Error();
    }
  };

  return (
    <MainContainerCustom showTabbar tabbarActive="im">
      <View className="im">
        <CBlockCustom title="基础使用" border>
          {data.map((item: any) => (
            <CImCardCustom
              data={item}
              key={item.id}
              customDesc={(d: DataType, dom: React.ReactNode) => {
                if (d.messageType === 'custom') {
                  return <>[房源]</>;
                }

                return dom;
              }}
              onClick={onClick}
              onDelete={onDelete}
            />
          ))}
        </CBlockCustom>
        <CBlockCustom title="自定义" border>
          <CImCardCustom
            data={{
              id: 4,
              badge: 1,
              messageType: 'text',
              headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
              nickname: '融云客服',
              desc: 'asdasdasd',
              date11111: dayjs().subtract(10, 'd').format('YYYY-MM-DD HH:mm:ss'),
            }}
            fieldObj={{
              headimg: 'headimg',
              nickname: 'nickname',
              desc: 'desc',
              date: 'date11111',
            }}
          />
        </CBlockCustom>
      </View>
    </MainContainerCustom>
  );
}
